<script>
import { loadAdmindepart, removeAdmindepart } from '@/api/admin/depart'
import { ElNotification } from 'element-plus'
// import AddDepartDialog from "@/views/admin/depart/departmore/adddepart.vue"

export default {
    data() {
        return {
            total: 0,
            params: {
                pageNo: 1,
                pageSize: 10,
                query: ""
            },
            
            list: [],
            showAdd:false
        }
    },
    methods: {
        async initdepartData() {
            let data = await loadAdmindepart(this.params)
            this.total = data.total
            this.list = data.list
        },
        async deleteFaculty() {
            await removeAdmindepart(row.department_id)
        }
    },
    created() {
        this.initdepartData()
    },
}

</script>
<template>
    <el-card>
        <template #header>系管理</template>
        <div class="nav-bar">
            <div class="search">
                <el-input size="small" placeholder="系名" clearable v-model="params.query"></el-input>
                <el-button size="small" type="primary" @click="initdepartData()">
                    <template #icon>
                        <el-icon>
                            <EpSearch />
                        </el-icon>
                    </template>
                    <span>查询</span>
                </el-button>
            </div>
            <div>
                <el-button size="small" type="success" @click="showAdd = true">
                    <template #icon>
                        <el-icon>
                            <EpPlus />
                        </el-icon>
                    </template>
                    <span>添加</span>
                </el-button>
            </div>
        </div>
        <el-table border stripe size="small" :data="list">
            <template #empty>
                <el-empty description="暂无数据" />
            </template>
            <el-table-column label="序号" type="index" width="60"></el-table-column>
            <el-table-column label="系名" prop="department_name"></el-table-column>
            <el-table-column label="专业数" prop="major_count"></el-table-column>
            <el-table-column label="教师数" prop="teacher_count"></el-table-column>
            <el-table-column label="操作" width="120">
                <el-button type="primary" link>编辑</el-button>
                <el-popconfirm @confirm="deleteFaculty(row)">
                    <template #reference>
                        <el-button type="danger" link>删除</el-button>
                    </template>
                </el-popconfirm>
            </el-table-column>
        </el-table>
        <el-pagination size="small" background layout="total, sizes, prev, pager, next, jumper"
            :page-sizes="[5, 10, 20, 30, 40, 50]" :total="total"
            v-model:page-size="params.pageSize"
      v-model:current-page="params.pageNo"
      @change="initdepartData()"
            />
    </el-card>

</template>

<style scoped>
.nav-bar {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    margin-bottom: 14px;
}

.nav-bar .el-input {
    width: 180px;
    margin-right: 10px;
}

.el-pagination {
    margin-top: 14px;
    justify-content: center;
}
</style>
